<template>
	<view class="user-avatar-container">
		<view 
			class="user-avatar" 
			:class="[size, { 'clickable': clickable }]"
			@tap="handleTap"
		>
			<!-- 已登录用户头像 -->
			<image 
				v-if="userInfo && userInfo.avatarUrl"
				class="avatar-image"
				:src="userInfo.avatarUrl"
				mode="aspectFill"
				@error="handleImageError"
			></image>
			
			<!-- 默认头像 -->
			<view v-else class="default-avatar" :class="avatarType">
				<text class="avatar-text">{{ avatarText }}</text>
			</view>
			
			<!-- 登录状态指示器 -->
			<view class="status-indicator" v-if="showStatus">
				<view class="status-dot" :class="{ 'online': isLoggedIn }"></view>
			</view>
			
			<!-- 等级徽章 -->
			<view class="level-badge" v-if="showLevel && userLevel">
				<text class="level-text">{{ userLevel }}</text>
			</view>
		</view>
		
		<!-- 用户信息卡片 -->
		<view class="user-info-card" v-if="showCard && userInfo">
			<view class="card-header">
				<text class="user-name">{{ displayName }}</text>
				<text class="user-desc">{{ userDesc }}</text>
			</view>
			<view class="card-stats" v-if="showStats">
				<view class="stat-item">
					<text class="stat-number">{{ userStats.divinationCount }}</text>
					<text class="stat-label">占卜次数</text>
				</view>
				<view class="stat-item">
					<text class="stat-number">{{ userStats.days }}</text>
					<text class="stat-label">使用天数</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'UserAvatar',
	props: {
		userInfo: {
			type: Object,
			default: null
		},
		size: {
			type: String,
			default: 'medium',
			validator: function (value) {
				return ['small', 'medium', 'large', 'extra-large'].indexOf(value) !== -1
			}
		},
		clickable: {
			type: Boolean,
			default: true
		},
		showStatus: {
			type: Boolean,
			default: false
		},
		showLevel: {
			type: Boolean,
			default: false
		},
		showCard: {
			type: Boolean,
			default: false
		},
		showStats: {
			type: Boolean,
			default: false
		},
		avatarType: {
			type: String,
			default: 'default',
			validator: function (value) {
				return ['default', 'gradient', 'themed'].indexOf(value) !== -1
			}
		},
		userStats: {
			type: Object,
			default: () => ({
				divinationCount: 0,
				days: 0
			})
		}
	},
	computed: {
		isLoggedIn() {
			return this.userInfo && this.userInfo.id
		},
		
		displayName() {
			if (this.userInfo) {
				return this.userInfo.nickName || this.userInfo.phoneNumber || '易学爱好者'
			}
			return '易学爱好者'
		},
		
		userDesc() {
			if (this.userInfo) {
				if (this.userInfo.loginType === 'wechat') {
					return '微信用户'
				} else if (this.userInfo.loginType === 'phone') {
					return '手机用户'
				}
			}
			return '探索传统智慧的奥秘'
		},
		
		avatarText() {
			if (this.userInfo && this.userInfo.nickName) {
				return this.userInfo.nickName.charAt(0)
			}
			return '合'
		},
		
		userLevel() {
			// 根据占卜次数计算等级
			const count = this.userStats.divinationCount
			if (count >= 100) return 'VIP'
			if (count >= 50) return 'Gold'
			if (count >= 20) return 'Silver'
			if (count >= 5) return 'Bronze'
			return null
		}
	},
	methods: {
		handleTap() {
			if (this.clickable) {
				this.$emit('tap', this.userInfo)
			}
		},
		
		handleImageError() {
			console.log('头像加载失败，使用默认头像')
			// 可以设置一个标志来显示默认头像
			this.$emit('image-error')
		}
	}
}
</script>

<style lang="scss" scoped>
.user-avatar-container {
	position: relative;
	display: inline-block;
}

.user-avatar {
	position: relative;
	border-radius: 50%;
	overflow: hidden;
	transition: transform 0.2s ease;
	
	&.clickable {
		cursor: pointer;
		
		&:active {
			transform: scale(0.95);
		}
	}
	
	&.small {
		width: 64rpx;
		height: 64rpx;
	}
	
	&.medium {
		width: 96rpx;
		height: 96rpx;
	}
	
	&.large {
		width: 128rpx;
		height: 128rpx;
	}
	
	&.extra-large {
		width: 160rpx;
		height: 160rpx;
	}
}

.avatar-image {
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.default-avatar {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&.default {
		background: linear-gradient(135deg, #6A82FB 0%, #FC5C7D 100%);
	}
	
	&.gradient {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	&.themed {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}
	
	.avatar-text {
		color: white;
		font-weight: bold;
		
		.small & {
			font-size: 24rpx;
		}
		
		.medium & {
			font-size: 36rpx;
		}
		
		.large & {
			font-size: 48rpx;
		}
		
		.extra-large & {
			font-size: 60rpx;
		}
	}
}

.status-indicator {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 24rpx;
	height: 24rpx;
	border-radius: 50%;
	background: white;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.status-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background: #cccccc;
		
		&.online {
			background: #07C160;
			animation: pulse 2s infinite;
		}
	}
}

.level-badge {
	position: absolute;
	top: -8rpx;
	right: -8rpx;
	background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
	border-radius: 12rpx;
	padding: 4rpx 8rpx;
	min-width: 32rpx;
	
	.level-text {
		font-size: 18rpx;
		color: white;
		font-weight: bold;
		text-align: center;
	}
}

.user-info-card {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 16rpx;
	background: white;
	border-radius: 16rpx;
	padding: 24rpx;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
	min-width: 240rpx;
	z-index: 10;
	
	.card-header {
		text-align: center;
		margin-bottom: 16rpx;
		
		.user-name {
			display: block;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-bottom: 8rpx;
		}
		
		.user-desc {
			display: block;
			font-size: 24rpx;
			color: #999999;
		}
	}
	
	.card-stats {
		display: flex;
		gap: 24rpx;
		
		.stat-item {
			flex: 1;
			text-align: center;
			
			.stat-number {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #6A82FB;
				margin-bottom: 4rpx;
			}
			
			.stat-label {
				display: block;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
}

@keyframes pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}
</style>